<template>
<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="workflow__id" label="Id" width="180" />
    <el-table-column prop="workflow__name" label="Name" width="180" />
    <el-table-column  label="使用" >
        <template #default="scope">
            <el-button  type="primary" @click="handleEdit(scope.row.workflow__id)">使用</el-button>
        </template>
    </el-table-column>
</el-table>




<el-dialog v-model="dialogFormVisible" title="请填写您的信息" width="1000">

    <div v-for="item in userdata"  >
        {{ item.fieldName }}
        <input v-if="item.fieldType ==  'input'" v-model="valuedata[item.fieldName]"></input>
        <select v-if="item.fieldType ==  'select'" v-model="valuedata[item.fieldName]">
            <option v-for="option in splitedata(item.fieldValue)" :value="option">{{ option }}</option>
        </select>
      <el-date-picker
        v-if="item.fieldType ==  'datetime'"
        v-model="valuedata[item.fieldName]"
        type="datetime"
        placeholder="Pick a Date"
        format="YYYY/MM/DD hh:mm:ss"
        value-format="YYYY-MM-DD h:mm:ss"
        />

        
        
    </div>



    <el-table :data="eadata" style="width: 100%">
    <el-table-column prop="id" label="Id" width="180" />
    <el-table-column prop="username" label="Name" width="180" />
    <el-table-column prop="position__name" label="position" width="180" />
    <el-table-column prop="role__name" label="role" width="180" />
    <el-table-column prop="level" label="Level" width="180" />
    </el-table>








    <template #footer>

        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="submit">
          Confirm
        </el-button>
    </template>
  </el-dialog>









</template>




<script setup>
import { ref,onMounted } from 'vue'
import axios from 'axios';
import { jwtDecode } from 'jwt-decode';


const user_id = jwtDecode(localStorage.getItem('token')).id || null;
const role_id = jwtDecode(localStorage.getItem('token')).role_id || null;

console.log(user_id);


const tableData = ref([])

const dialogFormVisible = ref(false);

const userdata = ref([])
const work_id = ref('')
const valuedata = ref({})

const eadata = ref([])



const getWfList = async () => {
    try {
        const response = await axios.get(`http://127.0.0.1:8000/wf/getall/?role_id=`+ role_id);
        console.log(response.data)
        tableData.value = response.data;
    } catch (error) {
        console.error('Error fetching workflow list:', error);
    }
};



onMounted(() => {
    getWfList();
});





const handleEdit = (id) => {
    dialogFormVisible.value = true;
    work_id.value = id;
    axios.get(`http://127.0.0.1:8000/wf/getdetail/?id=${id}&user_id=${user_id}`)
    .then(res=>{
        console.log(res)
        userdata.value = JSON.parse(res.data['data'][0]["params"]);
        eadata.value = res.data["ea_data"];
        console.log(userdata)
        for (let i = 0; i < userdata.value.length; i++) {
            valuedata.value[userdata.value[i]['fieldName']] = ''
        };
        console.log(valuedata.value);


    })
    

}



const submit = () => {
    const data ={
        user_id: user_id,
        workflow_id: work_id.value,
        params: JSON.stringify(valuedata.value),
        ea_user_id : eadata.value[0]['id']
    }
    axios.post('http://127.0.0.1:8000/wf/gettask/',data)
    .then(res=>{
        console.log(res)
    })






}



const splitedata = (data) => {

    const aa = data.split(',')

    return aa.map(item => {
        return item.trim();
})

}




</script>




<style scoped>



</style>